import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import useSyncState from '../hooks/useSyncState';
import VideoItem from './Video';

interface ObserverVideoProps {
	remoteStream: any;
	substreamSuccess: boolean;
	irtcClient: any;
}

const ObserverVideiContainer = styled.div``;

const VideoBox = styled.div`
	width: 148px !important;
	height: 109px !important;
	flex-shrink: 0;
	margin-right: 7px;
	position: relative;
	background-color: #2a2a2a;
	:hover {
		.widget-video-tool-container {
			display: block;
			width: 100%;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
			display: flex;
			align-items: center;
			position: absolute;
			padding: 0 30px;
			bottom: 0px;
			right: 0;
			color: #fff;
			padding: 0 12px;
			margin: 0;
		
		}
	}
`;

const LargeVideo = styled.div`
	width: 459px;
	height: 320px;
	margin: 0 auto;
`;

const LargeVideoBox = styled.div`
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #2a2a2a;
	:hover {
		.widget-video-tool-container {
			display: block;
			width: 100%;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 100%);
			display: flex;
			align-items: center;
			position: absolute;
			padding: 0 30px;
			bottom: 0px;
			right: 0;
			color: #fff;
			padding: 0 12px;
			margin: 0;
		}
	}
`;

const SmallVideo = styled.div`
	display: flex;
	width: 459px;
	margin: 0 auto;
	overflow-x: scroll;
	margin-top: 12px;
	overflow-y: hidden;
`;

const ObserverVideo = (props: ObserverVideoProps) => {
	const { remoteStream, irtcClient } = props;
	const [largeStream, setLargeStream] = useSyncState<any>([]);
	const [smallStream, setSmallStream] = useSyncState<any>([]);
	const [renderStream, setRenderStream] = useSyncState<any>([]);
	useEffect(() => {
		console.log(remoteStream, 'remoteStream');
		if (remoteStream.length !== 0) {
			setSmallStream(remoteStream.slice(1));
			setLargeStream(remoteStream.slice(0, 1));
			console.log(largeStream(), smallStream());
		}
	}, [remoteStream]);

	//判断这条流是否为语音流
	const getStreamAudioOnly = (stream: any) => {
		if (stream.media && stream.media.video && !stream.media.video.status) {
			return true;
		} else if (stream.settings && !stream.settings.video) {
			return false;
		} else {
			return false;
		}
	};

	return (
		<ObserverVideiContainer>
			<LargeVideo>
				{largeStream().map((item: any, index: number) => {
					return (
						<LargeVideoBox key={index} id={`video-box-${item.id}`}>
							<VideoItem
								irtcClient={irtcClient}
								setRenderStream={setRenderStream}
								renderStream={renderStream()}
								attributes={item.attributes}
								audioOnly={getStreamAudioOnly(item)}
								streamId={item.id}
								stream={item}
							/>
						</LargeVideoBox>
					);
				})}
			</LargeVideo>
			<SmallVideo>
				{smallStream().map((item: any, index: number) => {
					return (
						<VideoBox key={index} id={`video-box-${item.id}`}>
							<VideoItem
								irtcClient={irtcClient}
								setRenderStream={setRenderStream}
								renderStream={renderStream()}
								attributes={item.attributes}
								audioOnly={getStreamAudioOnly(item)}
								streamId={item.id}
								stream={item}
							/>
						</VideoBox>
					);
				})}
			</SmallVideo>
		</ObserverVideiContainer>
	);
};

export default ObserverVideo;
